<template>
  <div class="operationLog">
    <div class="mains_contain">
      <el-form :inline="true" :model="searchForm" size="small" label-width="80px">
        <el-form-item label="操作类型">
          <el-select v-model="searchForm.type" clearable placeholder="请输入操作类型">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备标识">
          <el-input v-model="searchForm.nodeId" clearable placeholder="请输入设备标识" />
        </el-form-item>
        <el-form-item label="请求状态">
          <el-select v-model="searchForm.status" clearable placeholder="请选择请求状态">
            <el-option label="成功" value="0"></el-option>
            <el-option label="失败" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="响应状态">
          <el-select v-model="searchForm.shellExcuteStatus" clearable placeholder="请选择响应状态">
            <el-option label="成功" value="1"></el-option>
            <el-option label="异常" value="2"></el-option>
            <el-option label="进行中" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" size="mini" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

      <div class="contant">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="status" label="操作类型" align="center">
            <template slot-scope="scope">
              <!-- <el-tag type="success" effect="dark" size="mini">{{
                scope.row.type | getTypeName(typeList)
              }}</el-tag> -->
              <span style="color:#67C23A">{{  scope.row.type | getTypeName(typeList) }}</span>

            </template>
          </el-table-column>
          <el-table-column prop="nodeId" label="设备标识" align="center"/>
          <!-- <el-table-column prop="body" label="发送报文" /> -->
          <el-table-column prop="status" label="请求状态" align="center">
            <template slot-scope="scope">
              <!-- <el-tag
                type="success"
                effect="dark"
                size="mini"
                v-if="scope.row.status == 0"
                >成功</el-tag
              >
              <el-tag
                type="danger"
                effect="dark"
                size="mini"
                v-if="scope.row.status == 1"
                >失败</el-tag
              > -->
              <span style="color:#67C23A" v-if="scope.row.status == '0'">成功</span>
              <span style="color:#F56C6C" v-if="scope.row.status == '1'">失败</span>
            </template>
          </el-table-column>
          <el-table-column prop="shellExcuteStatus" label="响应状态" align="center">
            <template slot-scope="scope">
              <!-- <el-tag
                type="success"
                effect="dark"
                size="mini"
                v-if="scope.row.shellExcuteStatus == 0"
                >进行中</el-tag
              >
              <el-tag
                type="success"
                effect="dark"
                size="mini"
                v-if="scope.row.shellExcuteStatus == 1"
                >成功</el-tag
              >
              <el-tag
                type="danger"
                effect="dark"
                size="mini"
                v-if="scope.row.shellExcuteStatus == 2"
                >异常</el-tag
              > -->
              <span style="color:#E6A23C" v-if="scope.row.shellExcuteStatus == '0'">进行中</span>
              <span style="color:#67C23A" v-if="scope.row.shellExcuteStatus == '1'">成功</span>
              <span style="color:#F56C6C" v-if="scope.row.shellExcuteStatus == '2'">异常</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="responseBody" label="ROMA响应结果" /> -->
          <!-- <el-table-column prop="responseData" label="ROMA响应报文" /> -->
          <el-table-column prop="createBy" label="操作人" align="center"/>
          <el-table-column prop="createTime" label="时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="handleInfo(row)" icon="el-icon-view">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
    <el-dialog title="日志详情" :visible.sync="dialogVisible" width="800px" top="5vh" v-dialogDrag>
      <el-form ref="infoForm" :model="infoForm" label-width="80px" size="mini">
        <el-form-item label="命令ID:">{{ infoForm.id }}</el-form-item>
        <el-form-item label="设备标识:">{{ infoForm.nodeId }}</el-form-item>
        <el-form-item label="发送topic:">{{ infoForm.topic }}</el-form-item>
        <!-- <el-form-item label="发送报文">{{ infoForm.body }}</el-form-item> -->
        <!-- <el-form-item label="ROMA响应结果">{{ infoForm.responseBody }}</el-form-item>
        <el-form-item label="ROMA响应报文">{{infoForm.responseData}}</el-form-item> -->
        <el-form-item label="操作人:">{{ infoForm.createBy }}</el-form-item>
        <el-form-item label="发送时间:">{{
          infoForm.createTime | formatTime
        }}</el-form-item>
        <el-form-item label="发送报文:">
          <el-scrollbar style="height: 100%">
            <!-- <div style="height:400px"> -->
            <json-viewer :value="infoForm.body" :expand-depth="4" copyable boxed sort></json-viewer>
            <!-- </div> -->
          </el-scrollbar>
        </el-form-item>
        <el-form-item label="响应报文:">
          <el-scrollbar style="height: 100%">
            <!-- <div style="height:400px"> -->
            <json-viewer :value="infoForm.responseBody" :expand-depth="4" copyable boxed sort></json-viewer>
            <!-- </div> -->
          </el-scrollbar>
        </el-form-item>
        <el-form-item label="执行结果:">
          <el-scrollbar style="height: 100%">
            <!-- <div style="height:400px"> -->
            <json-viewer :value="infoForm.responseData" :expand-depth="4" copyable boxed sort></json-viewer>
            <!-- </div> -->
          </el-scrollbar>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import * as api from "@/api/link/downRecord";
import { isJSON } from "@/utils/index";
export default {
  comments: {},
  props: {},
  data() {
    return {
      typeList: [
        // { value: 1, label: "获取设备信息" },
        // { value: 2, label: "系统文件下载" },
        // { value: 3, label: "系统文件下载状态查询" },
        { value: "DeviceState", label: "获取设备信息" },
        { value: "SoftwareLoad", label: "设备升级" },
        { value: "PatchLoad", label: "补丁升级" },
        { value: "SoftwareLoadStatus", label: "系统文件下载状态查询" },
        { value: "CfgfileLoad", label: "配置文件升级" },
        { value: "CfgfileLoadStatus", label: "配置文件升级状态查询" },
        { value: "SystemReboot", label: "重启设备" },
        { value: "LogfileUpload", label: "设备日志收集" },
        { value: "LogfileUploadNotify", label: "设备日志收集结果上报" },
        { value: "LogfileUploadStatus", label: "设备日志收集状态查询" },
        { value: "ShellScriptLoad", label: "应用升级" },
        { value: "ShellScriptLoadNotify", label: "可执行文件执行结果上报" },
        { value: "ShellScriptLoadStatus", label: "可执行文件执行状态查询" },
        { value: "EthStatus", label: "网络接口信息查询" },
        { value: "UserAdd", label: "密码设置" },
        { value: "UserInfo", label: "查询设备用户" },
        { value: "AppStop", label: "应用停止" },
        { value: "AppUninstall", label: "应用卸载" },
        { value: "AppDownload", label: "应用下载" },
        { value: "AppInstall", label: "应用安装" },
        { value: "AppStart", label: "应用启动" },
        { value: "AppStatus", label: "应用获取" },
        { value: "ContainerDownload", label: '容器下载' },
        { value: "ContainerInstall", label: '容器安装' },
        { value: "ContainerStart", label: '容器启动' },
        { value: "ContainerStop", label: '容器停止' },
        { value: "ContainerUninstall", label: '容器卸载' },
        { value: "ContainerStatus", label: '容器状态' },
        { value: "ContainerResize", label: '容器修改' }
      ],
      statusList: [
        { value: "1", label: "成功" },
        { value: "0", label: "请求中" },
      ],

      searchForm: {},
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      infoForm: {},
    };
  },
  filters: {
    getTypeName(val, list) {
      // console.log('val: ', val);
      // console.log('list: ', list);
      var res = "";
      list.map((item) => {
        console.log(item, 'item')
        // console.log(item.value == val);
        if (item.value == val) {
          res = item.label;
        }
      });
      console.log(res, 'RES');
      return res;
    },
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.getPageList();
  },
  mounted() { },
  methods: {
    handleInfo(row) {
      console.log(row);
      this.dialogVisible = true;
      // this.infoForm = Object.assign(row)
      var curRow = Object.assign({}, row);
      if (isJSON(curRow.body)) {
        curRow.body = JSON.parse(curRow.body);
      } else {
        curRow.body = {};
      }
      if (isJSON(curRow.responseBody)) {
        curRow.responseBody = JSON.parse(curRow.responseBody);
      } else {
        curRow.responseBody = {};
      }
      if (isJSON(curRow.responseData)) {
        curRow.responseData = JSON.parse(curRow.responseData);
      } else {
        curRow.responseData = {};
      }

      this.infoForm = curRow;
    },
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.searchList();
    },
    search() {
      this.pagination.page = 1;
      this.searchList();
    },
    searchList() {
      const p = Object.assign(this.searchForm, this.pagination);
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.operationLog {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>



<style lang="scss">
.operationLog {
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    line-height: 15px !important;
  }
}
</style>
